<template>
  <div class="client-points">
    <div class="mateCascader">
      <el-select v-model="selectValue" @change="selectname">
        <el-option v-for="item in optionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <el-row :gutter="20" type="flex">
      <el-col :span="16">
        <NewCard :title="title" :isright="true">
          <template slot="right">
            <el-select v-model="value" @change="selecttype" style="width: 120px">
              <el-option
                v-for="item in categorylist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <el-tree
            v-if="showtree"
            draggable
            :data="typeList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }">
              <span class="tree-add" :class="data.children ? '' : 'is-leaf'">
                <svg-icon icon-class="add-icon" />
              </span>
              <span class="tree-minus" :class="data.children ? '' : 'is-leaf'">
                <svg-icon icon-class="minus-icon" />
              </span>
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
          <el-table v-else :data="titileArr" style="width: 100%" @row-click="getExpertFn">
            <el-table-column prop="name" :label="name"></el-table-column>
          </el-table>
          <!-- <el-menu v-else>
           <p>{{title}}</p>
           
            <el-menu-item
              @click="getExpertFn(item)"
              v-for="item in titileArr"
              :key="item.value"
              :index="item.value.toString()"
            >
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
           
          </el-menu>-->
        </NewCard>
      </el-col>
      <el-col :span="8">
        <NewCard :isright="true" title="编辑" class="edit-box">
          <div class="pricing-for" v-if="showform">
            <el-form
              ref="form"
              :model="editForm"
              :rules="rules"
              label-width="110px"
              label-position="left"
              class="formclass"
            >
              <el-form-item label="服务类型" prop="name">
                <el-input v-model="treedata.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="实体总拨比">
                <el-input v-model="editForm.commission" placeholder="暂无数据" disabled></el-input>
              </el-form-item>
              <el-form-item label="商务专员拨比" prop="cm">
                <el-input v-model="editForm.cm" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="商务经理拨比" prop="cmDirector">
                <el-input v-model="editForm.cmDirector" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="商务总监拨比" prop="cmSupervisor">
                <el-input v-model="editForm.cmSupervisor" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="渠道专员拨比" prop="place">
                <el-input v-model="editForm.place" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="渠道经理拨比" prop="placeDirector">
                <el-input v-model="editForm.placeDirector" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="渠道总监拨比" prop="placeSupervisor">
                <el-input v-model="editForm.placeSupervisor" placeholder="请输入百分比"></el-input>
              </el-form-item>
              <el-form-item label="实体剩余拨比">
                <el-input :value="getResidue()" disabled></el-input>
              </el-form-item>
              <!-- <el-form-item label="管理拨比" prop="manager">
                <el-input v-model="editForm.manager" placeholder="请输入百分比"></el-input>
              </el-form-item> -->
            </el-form>

            <SubBtn>
              <template slot="btn">
                <el-button round @click="resetForm">重设</el-button>
                <el-button type="primary" @click="submit" round>保存</el-button>
              </template>
            </SubBtn>
          </div>
          <div v-else class="showinfo">
            <span>请选择三级类别</span>
          </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {
  getConsultTypeListApi,
  getprojectTypeListApi,
  getorganizationApi,
  getorganizationgetInfoApi,
  editorganizationCommissionApi,
  getorganizationCommissionApi
} from "@/wss/newApi_3-24/BK/aricereview/index.js";
// import EditFrom from "./editFrom.vue"
export default {
  name: "clientPoints",
  components: { NewCard, ComForm, SubBtn },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("输入不能为空"));
      value = Number(value);
      console.log(value);
      if (typeof value == "number") {
        if (value <= 100 && value >= 0) return callback();
      }
      callback(new Error("输入不能为空"));
    };
    // 0-100之间的数，包含小数
    const NumberPattern = new RegExp(/^(\d{1,2}(\.\d{1,2})?|100)$/);
    return {
      showform: false,
      selectValue: "", //选择的值
      categoryValue: "", //项目跟咨询选择的值
      optionList: [],
      title: "咨询类型",
      name: "",
      showtree: true, //树状展示
      categorylist: [
        {
          label: "咨询",
          value: 5
        },
        {
          label: "项目",
          value: 6
        },
        {
          label: "内容",
          value: 4
        },
        {
          label: "工具",
          value: 20
        }
      ],
      value: "咨询",
      activeMenu: "1",
      //内容
      titileArr: [],

      rules: {
        cm: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        cmSupervisor: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        cmDirector: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        place: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        placeSupervisor: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        placeDirector: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        commission: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        operations: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
        manager: [
          { required: !0, message: "不能为空" },
          {
            pattern: NumberPattern,
            message: "请输入0-100之间",
            trigger: "blur"
          }
        ],
      },
      //类别数组
      typeList: [],
      defaultProps: {
        //树状结构
        children: "children",
        label: "name"
      },
      typeLevel: "1",
      //实体ID
      entityid: "",
      //三级类别ID
      Nodeid: "",
      //类型
      type: "5",
      // 修改定价参数
      editForm: {
        cm: "",
        cmSupervisor: "",
        cmDirector: "",
        place: "",
        placeSupervisor: "",
        placeDirector: "",
        commission: ""
      },
      //树状数据
      treedata: {}
    };
  },
  created() {
    this.getConsultTypeListFn();
    this.getorganizationApiFn();
  },
  methods: {
    //获取实体名称
    async getorganizationApiFn() {
      let { code, rows } = await getorganizationApi();
      if (code != 200) return;
      this.selectValue = rows[0].name;
      this.entityid = rows[0].id;
      this.optionList = JSON.parse(JSON.stringify(rows));
    },
    //获取实体对应的波比
    // async getorganizationgetInfoApiFn(id) {
    //   let { code, rows } = await getorganizationgetInfoApi({id:id});
    //   if (code != 200) return;
    //   console.log(rows,"132456");

    // },
    // 获取咨询类型
    async getConsultTypeListFn() {
      let { code, rows } = await getConsultTypeListApi();
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
    },
    // 获取项目类型
    async getprojectTypeListApiFn() {
      let isTools = true
      let { code, rows } = await getprojectTypeListApi({isTools});
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
      return;
    },
    //id查询波比数据
    async getorganizationCommissionApiFn(data) {
      let { code, rows } = await getorganizationCommissionApi(data);
      if (code == 200) {
        // console.log(rows,"123456");
        let newrows = {};
        this.editForm = {};
        if (rows.length) {
          newrows = Object.assign(rows[0]);
          newrows.organizationId = this.entityid;
        }
        if (JSON.stringify(newrows) != "{}") {
          this.editForm = newrows;
        }
      }
    },

    async getExpertFn(item) {
      console.log(item, "123");
      let { code, rows } = await getorganizationCommissionApi({
        type: item.value,
        organizationId: this.entityid
      });
      if (code == 200) {
        this.treedata.name = item.name;
        this.showform = true;
        let newrows = {};
        this.editForm = {};
        if (rows.length) {
          newrows = Object.assign(rows[0]);
        }
        if (JSON.stringify(newrows) != "{}") {
          this.editForm = newrows;
        }
      }
    },
    //下拉选择咨询还是项目类型
    selecttype(value) {
      this.type = value;
      console.log(value, "value");
      if (value == 5) {
        this.showtree = true;
        this.title = "咨询类型";
        this.getConsultTypeListFn();
      } else if (value == 6) {
        this.title = "项目类型";

        this.showtree = true;
        this.getprojectTypeListApiFn();
      } else if (value == 4) {
        this.title = "类型";
        this.name = "内容类型";
        this.showtree = false;

        this.titileArr = [
          { name: "法条", value: 1, type: 1 },
          { name: "解答", value: 2, type: 1 },
          { name: "政策", value: 3, type: 1 },
          { name: "合同", value: 4, type: 1 }
        ];
      } else if (value == 20) {
        this.title = "类型";
        this.name = "工具类型";
        this.showtree = false;
        this.titileArr = [
          { name: "合同智审", value: 20, type: 0 },
          { name: "诉讼模拟", value: 21, type: 0 }
        ];
      }
    },
    //树状节点选择
    handleNodeClick(row) {
      const editFormData = JSON.parse(JSON.stringify(row));
      this.typeLevel = Number(editFormData.type);
      this.treedata = editFormData;
      this.showform = false;
      if (editFormData.type == 2) {
        this.editFirstLevel = editFormData.pid;
        this.showform = false;
      }
      if (editFormData.type == 2) {
        this.uploadTitile = "";
      } else {
        this.uploadTitile = "";
      }
      if (editFormData.type == 3) {
        this.Nodeid = row.id;
        console.log(row);
        this.showform = true;
        let data = {
          organizationId: this.entityid,
          type: this.type,
          typeId: row.id
        };
        this.getorganizationCommissionApiFn(data);

        // console.log(row.id, "66");
        // let secondItem = this.digui(this.typeList, row.pid);
        // // 获取二级数组
        // this.EditTwoChidren = this.typeList.find(
        //   (sItem) => sItem.id == secondItem.pid
        // )?.children;
        // this.editSecondLevel = row.pid;
      }
    },

    //选择实体
    selectname(value) {
      this.entityid = value;

      // this.getorganizationgetInfoApiFn(value)
      // let newarray={
      //   organization_id:this.entityid,
      //   type:this.type
      // }
    },

    // 获取剩余拨比
    getResidue(){
      // 判断所有加起来不能大于认证实体拨比
      let allNum = Number(this.editForm.cm) + Number(this.editForm.cmSupervisor) + Number(this.editForm.cmDirector) + Number(this.editForm.place) + Number(this.editForm.placeSupervisor) + Number(this.editForm.placeDirector)
      let num = this.editForm.commission*10000 - allNum*10000
      console.log(num,'xxxxxxxxxxxxxxx');
      if(num){
        return (num/10000).toFixed(1) || 0
      }else{
        return 0
      }
    },

    //提交设置
    async submit() {
      // 转成数字类型
      this.editForm.cm = Number(this.editForm.cm);
      this.editForm.cmSupervisor = Number(this.editForm.cmSupervisor);
      this.editForm.cmDirector = Number(this.editForm.cmDirector);
      this.editForm.place = Number(this.editForm.place);
      this.editForm.placeSupervisor = Number(this.editForm.placeSupervisor);
      this.editForm.placeDirector = Number(this.editForm.placeDirector);
      this.editForm.commission = Number(this.editForm.commission);
      // this.editForm.operations = Number(this.editForm.operations);
      // this.editForm.manager = Number(this.editForm.manager);

      // 判断所有加起来不能大于认证实体拨比
      let allNum = this.editForm.cm+this.editForm.cmSupervisor+this.editForm.cmDirector+this.editForm.place+this.editForm.placeSupervisor+this.editForm.placeDirector
      if(allNum>this.editForm.commission){
        this.$message({message: '总拨比不能大于实体总拨比',type: 'warning'});
        return
      }

      // console.log(newdata,"1111")
      try {
        await this.$refs.form.validate();
        let { rows, code } = await editorganizationCommissionApi(this.editForm);
        if (code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$nextTick(() => {
            this.$refs.form.clearValidate();
          });
          this.treedata.name = "";
          this.editForm = {};
        }
      } catch (error) {}
    },

    resetForm() {
      this.editForm = {
        id: "",
        type: "",
        organizationId: "",
        place: "",
        placeDirector: "",
        typeId: "",
        placeSupervisor: "",
        cm: "",
        cmDirector: "",
        commission: "",
        cmSupervisor: ""
      };
    }
  }
};
</script>

<style scoped>
.client-points {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row {
  height: calc(100% - 60px);
}
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 选择器 */
.mateCascader {
  height: 40px;
  margin-bottom: 20px;
}
.mateCascader .el-select {
  width: 320px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: #f5f6f8;
}
::v-deep .mateCascader .el-select .el-input__inner {
  border: 0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret {
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret:before {
  content: "\E78F";
}
.el-select-dropdown .el-select-dropdown__item.selected {
  color: #f87a23;
}

::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary,
.addBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .el-tree {
  /* height: 100%; */
  /* padding-top: 20px; */
  margin-bottom: 60px;
  /* overflow: scroll; */
}
::v-deep .el-tree::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-tree .is-expanded {
  position: relative;
}
::v-deep .el-tree .is-expanded::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus {
  position: relative;
  margin-right: 7px;
  background-color: #fff;
  z-index: 1;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus {
  opacity: 0;
  margin-right: 0;
}
::v-deep
  .el-tree
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content {
  padding-left: 43px !important;
}
::v-deep .el-tree .tree-minus {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-add {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-minus {
  display: inline-block;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before {
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content {
  height: 46px;
}
::v-deep .el-tree .el-icon-caret-right:before {
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node {
  border-bottom: 1px solid #f5f5f5;
}


.pricing-for{
  padding-top: 15px;
}
.edit-box {
  flex: 0.7;
  position: relative;
}

.el-menu-item {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #303133;
  padding: 0;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  white-space: nowrap;
  /* border-bottom: 1px solid #303133; */
}
.el-menu-item.is-active {
  /* color: #d2d2d2; */
  background-color: #f5f7fa;
}
.el-menu-item:hover {
  background-color: #f5f7fa;
}
.showinfo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
}
>>> .formclass {
  margin-bottom: 50px;
}
</style>